<template>
  <div class="whole">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index+1 < $route.matched.length">{{ item.meta.title }}</span>
          <router-link v-if="index+1 == $route.matched.length" :to="item.path">{{ item.meta.title }}</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="systemMessage">
      <div class="systemName systemMessages" style="margin-top:46px">
        <img src="../../../images/login/logo.png" alt/>
      </div>
      <div class="VersionIdentifiers systemMessages" style="margin-top:53px">
        <span class="text">版本信息</span>
        <span class="marking"></span>
      </div>
      <div class="VersionTitle systemMessages" style="margin-top:57px;">
        <div style="width:120px;display:flex;color: #999999;">版本</div>
        <div>{{ systemInfo.version }}</div>
      </div>
      <div class="VersionTitle systemMessages" style="margin-top:40px;">
        <div style="width:120px;display:flex;color: #999999;">版本编号</div>
        <div>{{ systemInfo.versionCode }}</div>
      </div>
      <div class="VersionTitle systemMessages" style="margin-top:30px;">
        <div style="width:120px;display:flex;color: #999999;">制造商名称</div>
        <div>{{ systemInfo.manufacturer }}</div>
      </div>
      <div class="VersionTitle systemMessages" style="margin-top:30px;">
        <div style="width:120px;display:flex;color: #999999;">发版日期</div>
        <div>{{ systemInfo.releaseTime }}</div>
      </div>
      <div :class="butAdmin" class="but systemMessages" @click="sysyemEdit(systemInfo)" v-if="exportData">
        <a-icon type="form"/>
        <span style="margin-left:10px">编辑</span>
      </div>
    </div>
    <div class="Loading" v-show="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <!-- 编辑 -->
    <div class="aModalSystemMessage" ref="aModalSystemMessage">
      <a-modal
          v-model="editVisible"
          :maskClosable="false"
          centered
          :mask="false"
          :getContainer="()=>$refs.aModalSystemMessage"
          title="编辑系统信息"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditThirdUse">提交</a-button>
          <a-button :class="TableButReset" @click="editReturnReset" class="butReset">返回</a-button>
        </template>

        <a-form
            hideRequiredMark
            class="editAform"
            :form="form"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 20 }"
        >
          <a-form-item class="AformItem" label="名称">
            <a-input
                v-decorator="[
            'name',
            { rules: [{ required: true, message: '请输入名称!' }] },
          ]"
            />
          </a-form-item>

          <a-form-item class="AformItem" label="版本">
            <a-input
                v-decorator="[
            'version',
            { rules: [
                { required: true, message: '请输入版本!' },
                { max: 10, message: '最大输入10个字符!' }
              ]
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="AformItem" label="版本编号">
            <a-input
                v-decorator="[
            'versionCode',
            { rules: [{ required: true, message: '请输入版本编号!' }, { max: 10, message: '最大输入10个字符!' }] },
          ]"
            />
          </a-form-item>

          <a-form-item class="AformItem" label="制造商名称">
            <a-input
                v-decorator="[
            'manufacturer',
            { rules: [{ required: true, message: '请输入制造商名称!' }] },
          ]"
            />
          </a-form-item>

          <a-form-item class="AformItem" label="发版日期">
            <a-date-picker
                class="releaseTime"
                show-date
                placeholder="请选择时间"
                v-decorator="[
            'releaseTime',
            {
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
          ]"
                @change="onChange"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from "../../api/systemMessage/systemMessage.js";

export default {
  data() {
    return {
      Loading: false,
      systemInfo: [],
      exportData: false,
      releaseTime: "",
      formLayout: "horizontal",
      form: this.$form.createForm(this, {name: "coordinated"}),
      editVisible: false,
      butAdmin: 'butAdmin',
      TableButSave: 'TableButSave',
      TableButReset: 'TableButReset',
    };
  },
  mounted() {
    let _this = this;
    // let userInfo = this.$store.state.userInfo;
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.isShow(userInfo);
    this.getInfo();
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.butAdmin = 'butAdmin';
        _this.TableButSave = 'TableButSave';
        _this.TableButReset = 'TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.butAdmin = 'butAdmin1';
        _this.TableButSave = 'TableButSave1';
        _this.TableButReset = 'TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.butAdmin = 'butAdmin';
      _this.TableButSave = 'TableButSave';
      _this.TableButReset = 'TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.butAdmin = 'butAdmin1';
      _this.TableButSave = 'TableButSave1';
      _this.TableButReset = 'TableButReset1';
    }
  },
  methods: {
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:sys:version:edit")) {
        this.exportData = true;
      }
    },
    sysyemEdit(systemInfo) {
      this.editVisible = true;
      this.getInfo();
    },

    editReturnReset() {
      this.editVisible = false;
    },
    getInfo() {
      let _this = this;
      api.systemGetInfo().then(res => {
        if (res.code == 200) {
          _this.systemInfo = res.data;
          _this.systemInfo.releaseTime = moment(res.data.releaseTime).format(
              "YYYY-MM-DD"
          );
          _this.form.setFieldsValue({
            name: _this.systemInfo.name,
            version: _this.systemInfo.version,
            versionCode: _this.systemInfo.versionCode,
            manufacturer: _this.systemInfo.manufacturer,
            releaseTime: _this.systemInfo.releaseTime
          });
        }
      });
    },
    onChange(value, dateString) {
      this.releaseTime = dateString;
    },
    closeEditThirdUse() {
      let _this = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          values.releaseTime = _this.releaseTime;
          console.log("Received values of form: ", values);
          api.systemEdit(null, values).then(res => {
            if (res.code == 200) {
              console.log(res);
              // 关闭对话框
              _this.$message.success("编辑成功");
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getInfo();
            } else {
              _this.$message.error("编辑失败");
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getInfo();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.whole {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crumbs {
    position: absolute;
    top: 14px;
    display: flex;
    margin-left: 25px;
    font-size: 18px;
    margin-bottom: 10px;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-size: 18px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-size: 18px;
      color: #1e7eff;
    }
  }

  .systemMessage {
    position: absolute;
    top: 50px;
    margin-left: 25px;
    width: 1560px;
    height: 90%;
    min-height: 700px;
    border: 1px #ddd solid;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;

    .systemMessages {
      margin-left: 80px;
    }

    .VersionTitle {
      display: flex;
      font-size: 16px;
    }

    .VersionIdentifiers {
      width: 1379px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .text {
        font-size: 18px;
      }

      .marking {
        width: 1284px;
        height: 1px;
        border: 1px solid #e3e3e3;
        margin-left: 21px;
      }
    }

    .systemName {
      width: 372px;
      height: 52px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .but {
      margin-top: 79px;
      border: 1px solid #ddd;
      width: 90px;
      height: 36px;
      border-radius: 6px;
      bottom: 300px;
      left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0078b5;
      color: #fff;
      border-radius: 45px;
      display: flex;
    }
  }

  .SysyemEdit {
    position: absolute;
    margin-left: 50%;
    transform: translate(-450px);
    top: 40px;
    width: 600px;
    border: 1px #ddd solid;
    border-radius: 20px;
    background-color: #fff;
  }

  .butSave {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    background-color: #0078b5;
    font-size: 16px;
    color: #fff;
    margin-right: 40px;
  }

  .butReset {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    font-size: 16px;
    color: #0376b7;
    border: 1px solid #0376b7;
  }

  .aModalSystemMessage {
    .releaseTime {
      float: left;
    }

    .editAform {
      margin-top: 20px;
      width: 80%;

      .AformItem {
        display: flex;
      }
    }

    .sysyemEditTitle {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      border-bottom: 1px solid #d5d5d5;

      .title_text {
        margin-left: 20px;
      }

      .title_close {
        margin-right: 20px;
      }
    }
  }
}
</style>

<style>
.aModalSystemMessage
.editAform.ant-form.ant-form-horizontal.ant-form-hide-required-mark {
  width: 600px !important;
}

.aModalSystemMessage .ant-form-item-label {
  display: flex !important;
  width: 100px !important;
  margin-left: 20px !important;
}

.aModalSystemMessage .ant-input {
  width: 450px !important;
}

.aModalSystemMessage .ant-form-item-control {
  width: 450px !important;
}

.aModalSystemMessage .ant-row.ant-form-item {
  width: 600px !important;
  height: 55px !important;
  margin-bottom: 0 !important;
}

.aModalSystemMessage .ant-modal-body {
  padding: 0 !important;
  padding-top: 20px !important;
}

.aModalSystemMessage
.addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.aModalSystemMessage .ant-modal-content {
  width: 600px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}
</style>